<template>
    <div :class="switchValue == 'dark'?'home_dark':'home_light'">
        <div class="second-page">
            <div class="wrap" style="padding: 0">
                <headerCom2></headerCom2>
            </div>
            <div class="banner">
                <div class="wrap">
                     <div class="banner-left-title">
                        <p>{{ curMenu }}</p>
                    </div>
                    <div
                        class="banner-right-crumbs"
                        style="
                        width: 69%;
                        display: inline-flex;
                        justify-content: space-between;
                        align-items: center;
                        padding-left: 15px
                        "
                    >
                        <p style="color: #fff">您的位置：首页 > {{ curMenu }}</p>
                    </div>
                </div>
            </div>
            <div class="contentBox">
                <div class="left_box">
                    <el-menu
                        :collapse-transition="true"
                        :unique-opened="true"
                        :background-color="switchValue=='light'?'#FFF':'rgba(37, 43, 90, 0.88)'"
                        :text-color="switchValue=='light'?'#333':'#fff'"
                        active-text-color="#5ca7ff"
                        style="width: 100%;min-height: 80vh;border-right:0!important"
                    >
                        <el-menu-item v-for="(item,index) in menuList" :key="index" :index="item.ID" @click="getdataList(item.ID,item.NAME)">
                            {{item.NAME}}
                        </el-menu-item>
                    </el-menu>
                </div>
                <div class="right_box">
                    <p style="font-size: 22px;" :style="switchValue == 'light'?'color:#333':'color:#FFF'">{{listTit}}</p>
                    <el-table
                    :data="tableData"
                    :hide-on-single-page="false"
                    :header-cell-style="
                          switchValue == 'dark'
                            ? 'background-color: #18418d;color:#FFF'
                            : 'background-color:#FFF;color:#999'
                        "
                        :cell-style="
                          switchValue == 'dark'
                            ? 'background-color: #262a54;width:10%'
                            : 'background-color:#FFF;color:#999;width:10%'
                        "
                        :style="
                          switchValue == 'dark'
                            ? 'width: 100%;background-color: #262a54'
                            : 'width: 100%;background-color: #ffffff'
                        "
                        >
                        <el-table-column
                        label="序号"
                        prop="PETA_RN"
                        width="80">
                        </el-table-column>
                        <el-table-column
                        label="文件名"
                        prop="PRNAME">
                        </el-table-column>
                        <el-table-column
                        label="所属系统"
                        prop="LINKNAME">
                        </el-table-column>
                        <el-table-column
                        label="上传时间"
                        prop="PRUPLOADTIME">
                        </el-table-column>
                         <el-table-column
                        label="操作"
                        width="100">
                            <template slot-scope="scope">
                                <el-popover
                                    placement="bottom"
                                    trigger="hover"
                                    v-if="scope.row.FTPPATH"
                                    title=""
                                    >
                                    <vue-qr  :text="scope.row.FTPPATH" size="150"></vue-qr>
                                    <el-button type="primary" slot="reference" :style="switchValue == 'light'?'color:#FFF!important':'color:#333'" @click="downloadItem(scope.row.FASTFILEURL)">下载</el-button>
                                </el-popover>
                                <el-button v-else type="primary" slot="reference" :style="switchValue == 'light'?'color:#FFF!important':'color:#333'" @click="downloadItem(scope.row.FASTFILEURL)">下载</el-button>                
                           </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pageSize"
                        layout="sizes, prev, pager, next"
                        style="margin:10px 0"
                        :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <footer-com></footer-com>
    </div>
</template>

<script>
import footerCom from "./footerCom.vue";
import HeaderCom2 from "./headerCom2.vue";
import VueQr from "vue-qr"
export default{
    components: { footerCom, HeaderCom2,VueQr },
    data(){
        return{
            switchValue:'light',
            curMenu: '公共资源',
            interfaceName: "antu.newportal-zjx.provider.GGZY.GGZYProvider",
            menuList:[{
                id:0,
                name:'插件及控件类'
            },{
                id:1,
                name: '安装文件类'
            },{
                id:2,
                name: '通用文件类'
            }],
            active:0,
            listTit:'插件及控件类',
            page:1,
            pageSize:10,
            total:0,
            tableData:[],
        }
    },
    created(){
        this.getUserStyle();
        this.getMenu()
    },
    methods:{
        getMenu(){
            this.$.ajax({
                url: this.$API.ajaxPath,
                type: "post",
                data: {
                interfaceName: this.interfaceName,
                methodName: "QueryDictionary",
                args: [""],
                },
                dataType: "json",
                success: (response) => {
                if (response.status == "0") {
                    console.log(JSON.parse(response.result));
                    this.menuList = JSON.parse(response.result);
                    this.active = this.menuList[0].ID
                    this.getdataList(this.menuList[0].ID,this.menuList[0].NAME)
                }
                },
                error: (xhr) => {
                console.log(xhr);
                },
            });
        },
        handleSizeChange(val){
            this.pageSize = val
            this.getdataList(this.active,this.listTit)
        },
        handleCurrentChange(val){
            this.page = val
            this.getdataList(this.active,this.listTit)
            
        },
        getdataList(id,name){
            this.listTit = name
            this.active = id
            this.$.ajax({
                url: this.$API.ajaxPath,
                type: "post",
                data: {
                interfaceName: this.interfaceName,
                methodName: "QueryResourcePageById",
                args: [id,this.page,this.pageSize],
                },
                dataType: "json",
                success: (response) => {
                if (response.status == "0") {
                    console.log(JSON.parse(response.result));
                    this.tableData = JSON.parse(response.result).items
                    this.total = JSON.parse(response.result).totalItems
                    document.documentElement.scrollTop = document.body.scrollTop = 0;
                }
                },
                error: (xhr) => {
                console.log(xhr);
                },
            });
        },
        getUserStyle() {
        let that = this;
        this.$.ajax({
            url: this.$API.ajaxPath,
            type: "post",
            data: {
            interfaceName: "antu.newportal-zjx.provider.user.UserProvider",
            methodName: "getUserStyle",
            args: [localStorage.getItem("USER_ID")],
            },
            dataType: "json",
            success: (response) => {
            if (response.status == "0") {
                if (response.result == "0") {
                that.switchValue = "dark";
                } else {
                that.switchValue = "light";
                }
            }
            },
            error: (xhr) => {
            console.log(xhr);
            },
        });
        },
        downloadItem(url){
            window.location.href = url
        }
    }
}
</script>

<style lang="less" scoped>
@import "./css/light.less";
// @import "./css/blue.less";
@import "./css/dark.less";
  .banner {
    width: 100%;
    height: 3rem;
    background-image: url(../assets/image/banner-bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    .wrap{
        display: flex;
        align-items: flex-end;
        height: 100%;
        padding: 0 200px;
        box-sizing: border-box;
        .banner-left-title{
            padding: 20px 35px;
            box-sizing: border-box;
            width: 30%;
            height: 1.6rem;
            background-color: #0085ff;
            border-radius: 5px 5px 0px 0px;
            position: relative;
            display: inline-flex;
            align-items: center;
            p {
                margin: 0;
                font-size: .6rem;
                font-weight: bolder;
                color: #fff;
            }
        }
         .banner-left-title::before {
            content: "";
            width: 5px;
            height: 25px;
            opacity: 1;
            background: #ffffff;
            position: absolute;
            left: 20px;
        }
    }
  }
    .contentBox{
        width: 100%;
        display: flex;
        padding: 0 200px;
        justify-content: space-between;
        box-sizing: border-box;
        align-items: flex-start;

        .left_box{
            width: 30%;
            display: inline-flex;
        }
        .right_box{
            width: 69%;
            display: inline-flex;
            margin: 0!important;
            min-height: 85vh;
            flex-direction: column;
            padding: 0 20px;
            box-sizing: border-box;
        }
    }
    .home_light .left_box ul{
        background-color: #FFF!important;
    }
    .home_light .right_box{
        background-color: #FFF!important;
    }
    .home_light .contentBox{
        background: #f4f9ff !important;
        .right_box{
            background: #FFF;
        }
    }
    .home_dark .contentBox{
        background: rgba(19,20,28,.9) !important;
        .right_box{
            background: rgba(37, 43, 90, 0.88);
        }
    }
    .el-table::before{
        height: 0!important;
    }
    .home_light .number{
        color: #333!important;
    }
    .home_light .el-button span{
        color: #FFF!important;
    }
</style>
